title: 犀利开发—jQuery内核详解与实践-5_事件封装机制与解析
date: 2018.1.8

toc_fold: unfold

第 1 章 jQ起步

第 2 章 jQ解密技术

第 3 章 高效选择的技巧与原理

第 4 章 文档对象的操作及高效实践

第 5 章 事件封装机制与解析

5.1 事件模型

1 0级事件模型

2 事件模型中的Event对象

3 事件模型中的冒泡现象

4 事件流控制与默认事件动作

5 2级DOM标准事件模型

addEventListener(type,function,useCapture)

1. 注册事件
2. 事件传播
3. 销毁事件

   6 IE事件模型

5.2 jQuery事件模型

1 绑定事件

2 注销事件

3 jQuery事件模型中的Event对象

4 jQuery事件触发

5 jQuery事件切换

1. 使用toggle()切换
2. 使用hover()切换

   6 jQuery事件委派

   live(),die()

   7 jQuery事件命名空间

   $().unbind(“.a”) $().trigger(“click!”)

   8 jQuery多事件绑定

   9 jQuery自定义事件

5.3 jQuery页面初始化

1 使用jQuery的ready()方法

$(document).ready(function(a){})//一个参数a—引用jQuery函数，并
JQuery(function($){})
$(function(){})

$(function(me){me(‘div’).text(‘jQ函数别名’)})//默认$,或jQuery
不能和原生的load同用

2 ready事件的触发时机

$(window).load()

3 初始化事件的多次调用

load，第一次被第二次覆盖了
如果多个文件，ready可以无限多次调用

4 使用JS自定义的addLoadEvent

轻松实现多次调用load事件
function addLoadEvent(func){
var oldOnload=window.onload
if(typeof window.onload!=’function’){
window.onload=func
}else{
window.onload=function(){
oldOnload();
func()
}
}
}

5.4 使用JS自定义jQ的事件方法

1 JS与jQ的执行效率比较

原生比库执行效率更高（选择器，和事件模型）
load更好，不用担心兼容，且两者可以混合使用
浏览器兼容性很大差异的鼠标事件，jQ

2 自定义ready()方法

DOMContentLoaded;IE,onreadystatechange–document.readyState===’complete’
注销，避免反复触发

针对IE，模拟DOMContentLoaded事件的方法：判断document是否可以滚动

3 自定义bind()方法

DOMextend(“bind”,function(type,data,fn){
var _this=_this
if(_this.addEventListener){
_this.addEventListener(type,function(event){
event.datas=data
fn(event)
},false)
}else{
_this.attachEvent(“on”+type,function(){
var event=window.event
})
}
return _this
})

4 自定义one()方法

bind基础上添加注销行为

2018.1.12 星期五 00：11 P242

第 6 章 动画效果设计及其高效实践

6.1 直接显示和隐藏

6.2 滑动显示和隐藏

6.3 渐隐和渐显

6.4 自定义动画

第 7 章 Ajax异步通信高效实践

第 8 章 高效开发和使用插件

第 9 章 jQ辅助工具

第 10 章 使用jQ打造Ajax异步交互式动态网站